<template>
    <div>
        <el-breadcrumb >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >上传管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-button type="danger">删除按钮</el-button>
        <el-input placeholder="请输入文件" icon="search"  style="width:200px"></el-input>
        <el-button >搜索</el-button>
        
        <el-tree
        :data="tree"
        :props="defaultProps"
        :highlight-current="true"
        node-key="id"
        accordion
        style="width:250px;margin-top:20px;"
        @node-click="handleNodeClick">
        </el-tree>

        <div>
        
            <el-table
                ref="multipleTable"
                :data="list"
                border
                tooltip-effect="dark"
                style="width:700px; margin-top:20px;float:left"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="originalname"
                label="原始名称"
                width="120">
                </el-table-column>
                <el-table-column
                prop="size"
                label="文件大小"
                >
                </el-table-column>
                <el-table-column
                prop="filename"
                label="文件名称"
                >
                </el-table-column>
                <el-table-column
                prop="date"
                label="上传时间"
                >
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button
                        size="small"
                        type="danger"
                        @click.native.prevent="deleteRow(scope.$index,scope.row,list)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

  
            <div style="float:left;margin:20px 0 0 40px;">
                <el-upload
                drag
                name="avatar"
                :action="postUrl"
                :data="postData"
                multiple
                >
                <i class="el-icon-upload" ></i>
                <div class="el-upload__text" >将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
        </div>

        
    </div>
    
</template>
<script>
import Axios from 'axios';
import Base from '../../common/Base.js'
var moment = require('moment');
    export default{
        mixins:[Base],
        data(){
            return{
                module:'uploads',
                filter:{
                    originalname:null,
                    cateId:null
                },
                postData:{
                    _id:null
                },
                multipleSelection: [],//表格多选
                fileTable:[],
                tree:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteRow(index,row,rows) {
                rows.splice(index, 1);
            },
            handleNodeClick(data) {  //节点的切换
                this.postData._id = data._id;
                this.filter.cateId = data._id;
                this.getData();
            },
            getTreeData(type){
                Axios({
                    method:"get",
                    url:`http://localhost:3000/cate/1`,
                    dataType:'json',
                }).then(res=>{
                    this.tree = res.data;
                })
            },
        },
        computed:{
            postUrl(){
                return `http://localhost:3000/uploads/filedata/${this.postData._id}`
            }
        },
        created(){
            this.getTreeData();
        }
    }
</script>   